<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kkFileView 文件在线预览</title>
</head>
<body>
<button type="button" style="font-size: 18px" onclick="httpFileUrlPreview1()">气质美女(图片预览)</button>
<br/>
<br/>
<button type="button" style="font-size: 18px" onclick="httpFileUrlPreview2()">html源码(预览)</button>
<br/>
<br/>
<button type="button" style="font-size: 18px" onclick="httpFileStreamPreview1()">演戏连跑步都需要假跑吗(视频预览)</button>
<br/>
<br/>
<button type="button" style="font-size: 18px" onclick="httpFileStreamPreview2()">多个视频压缩文件预览</button>

</body>

<!--前端base64依赖，用于对预览的http路径进行转码-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
<script type="text/javascript">

    // 1、【http/https 资源文件预览】url 路径直接指向的是网络文件。
    // 当项目内需要预览文件时，只需要调用浏览器打开 kkFileView 的预览接口，并传入须要预览文件的url即可。
    // 如果要预览的url里包含需要转义的特殊字符，则需要使用encodeURIComponent(url)转义
    function httpFileUrlPreview1() {
        // 要预览文件的访问地址
        let url = 'http://localhost:8080/fileServer/images/气质美女.jpg';
        window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)));
    }

    function httpFileUrlPreview2() {
        // 要预览文件的访问地址
        let url = 'http://localhost:8080/fileServer/fileOnlinePreview.html';
        window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)));
    }

    // 2、【http/https 流资源文件预览】url 路径是一个接口，接口内部返回文件的输出流。
    // 很多系统内不是直接暴露文件下载地址，而是请求通过id、code等参数到统一的下载接口，
    // 后端通过id或code等参数定位文件，再通过OutputStream输出下载，
    // 此时下载url是不带文件后缀名的，预览时需要拿到文件名，传一个参数fullfilename=xxx.xxx来指定文件名(必须带格式后缀，如 a.txt)
    function httpFileStreamPreview1() {
        // 要预览文件的访问地址，内部返回是文件流
        let originUrl = 'http://127.0.0.1:8080/fileServer/singleDownload3?fileId=3';
        let previewUrl = originUrl + '&fullfilename=演戏连跑步都需要假跑吗(视频).mp4'
        window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));
    }

    function httpFileStreamPreview2() {
        // 要预览文件的访问地址，内部返回是文件流
        let originUrl = 'http://127.0.0.1:8080/fileServer/zipDownload2?fileId=3,4';
        let previewUrl = originUrl + '&fullfilename=多个视频压缩.zip'
        window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));
    }
</script>

</html>